<!DOCTYPE html>

<html lang="en">
    
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Preferences</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

<div class="container">
  
  <div class="mt-4 mb-4" style="color: red;">(Changes to any setting requires a restart)</div>

  <form>
    <h2 class="mt-4">Dark mode</h2>
    
    <div class="form-group row mt-4">
      <div class="col-sm-2">
        <label class="form-check-label" for="darkModeEnabled">
          Enabled
        </label>
      </div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="darkModeEnabled">
        </div>
      </div>
    </div>

    <div class="mt-4 small" style="color: #888888;">Dark mode theme implemented from <a href="https://github.com/auscompgeek/fb-messenger-dark"></a>https://github.com/auscompgeek/fb-messenger-dark</a></div>
    
    <hr class="mt-5">

    <h2 class="mt-4">Spell check</h2>
    
    <div class="form-group row mt-4">
      <div class="col-sm-2">
        <label class="form-check-label" for="spellCheckEnabled">
          Enabled
        </label>
      </div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spellCheckEnabled">
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label for="spellCheckLocaleSelect" class="col-sm-2 col-form-label">Language</label>
      <div class="col-sm-10">
        <select class="custom-select" id="spellCheckLocaleSelect">
          <option value="">System</option>
          <option value="af">Afrikaans</option>
          <option value="am">Amharic</option>
          <option value="ar">Arabic</option>
          <option value="az">Azerbaijani</option>
          <option value="be">Belarusian</option>
          <option value="bg">Bulgarian</option>
          <option value="bh">Bihari</option>
          <option value="bn">Bengali</option>
          <option value="br">Breton</option>
          <option value="bs">Bosnian</option>
          <option value="ca">Catalan</option>
          <option value="co">Corsican</option>
          <option value="cs">Czech</option>
          <option value="cy">Welsh</option>
          <option value="da">Danish</option>
          <option value="de">German</option>
          <option value="de-AT">German (Austria)</option>
          <option value="de-CH">German (Switzerland)</option>
          <option value="de-DE">German (Germany)</option>
          <option value="el">Greek</option>
          <option value="en">English</option>
          <option value="en-AU">English (Australia)</option>
          <option value="en-CA">English (Canada)</option>
          <option value="en-GB">English (UK)</option>
          <option value="en-NZ">English (New Zealand)</option>
          <option value="en-US">English (US)</option>
          <option value="en-ZA">English (South Africa)</option>
          <option value="eo">Esperanto</option>
          <option value="es">Spanish</option>
          <option value="es-419">Spanish (Latin America)</option>
          <option value="et">Estonian</option>
          <option value="eu">Basque</option>
          <option value="fa">Persian</option>
          <option value="fi">Finnish</option>
          <option value="fil">Filipino</option>
          <option value="fo">Faroese</option>
          <option value="fr">French</option>
          <option value="fr-CA">French (Canada)</option>
          <option value="fr-CH">French (Switzerland)</option>
          <option value="fr-FR">French (France)</option>
          <option value="fy">Frisian</option>
          <option value="ga">Irish</option>
          <option value="gd">Scots Gaelic</option>
          <option value="gl">Galician</option>
          <option value="gn">Guarani</option>
          <option value="gu">Gujarati</option>
          <option value="ha">Hausa</option>
          <option value="haw">Hawaiian</option>
          <option value="he">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hr">Croatian</option>
          <option value="hu">Hungarian</option>
          <option value="hy">Armenian</option>
          <option value="ia">Interlingua</option>
          <option value="id">Indonesian</option>
          <option value="is">Icelandic</option>
          <option value="it">Italian</option>
          <option value="it-CH">Italian (Switzerland)</option>
          <option value="it-IT">Italian (Italy)</option>
          <option value="ja">Japanese</option>
          <option value="jw">Javanese</option>
          <option value="ka">Georgian</option>
          <option value="kk">Kazakh</option>
          <option value="km">Cambodian</option>
          <option value="kn">Kannada</option>
          <option value="ko">Korean</option>
          <option value="ku">Kurdish</option>
          <option value="ky">Kyrgyz</option>
          <option value="la">Latin</option>
          <option value="ln">Lingala</option>
          <option value="lo">Laothian</option>
          <option value="lt">Lithuanian</option>
          <option value="lv">Latvian</option>
          <option value="mk">Macedonian</option>
          <option value="ml">Malayalam</option>
          <option value="mn">Mongolian</option>
          <option value="mo">Moldavian</option>
          <option value="mr">Marathi</option>
          <option value="ms">Malay</option>
          <option value="mt">Maltese</option>
          <option value="nb">Norwegian (Bokmal)</option>
          <option value="ne">Nepali</option>
          <option value="nl">Dutch</option>
          <option value="nn">Norwegian (Nynorsk)</option>
          <option value="no">Norwegian</option>
          <option value="oc">Occitan</option>
          <option value="om">Oromo</option>
          <option value="or">Oriya</option>
          <option value="pa">Punjabi</option>
          <option value="pl">Polish</option>
          <option value="ps">Pashto</option>
          <option value="pt">Portuguese</option>
          <option value="pt-BR">Portuguese (Brazil)</option>
          <option value="pt-PT">Portuguese (Portugal)</option>
          <option value="qu">Quechua</option>
          <option value="rm">Romansh</option>
          <option value="ro">Romanian</option>
          <option value="ru">Russian</option>
          <option value="sd">Sindhi</option>
          <option value="sh">Serbo-Croatian</option>
          <option value="si">Sinhalese</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="sn">Shona</option>
          <option value="so">Somali</option>
          <option value="sq">Albanian</option>
          <option value="sr">Serbian</option>
          <option value="st">Sesotho</option>
          <option value="su">Sundanese</option>
          <option value="sv">Swedish</option>
          <option value="sw">Swahili</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="tg">Tajik</option>
          <option value="th">Thai</option>
          <option value="ti">Tigrinya</option>
          <option value="tk">Turkmen</option>
          <option value="to">Tonga</option>
          <option value="tr">Turkish</option>
          <option value="tt">Tatar</option>
          <option value="tw">Twi</option>
          <option value="ug">Uighur</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="uz">Uzbek</option>
          <option value="vi">Vietnamese</option>
          <option value="xh">Xhosa</option>
          <option value="yi">Yiddish</option>
          <option value="yo">Yoruba</option>
          <option value="zh">Chinese</option>
          <option value="zh-CN">Chinese (Simplified)</option>
          <option value="zh-TW">Chinese (Traditional)</option>
          <option value="zu">Zulu</option>
        </select>
      </div>
    </div>

    <div class="mt-4 small" style="color: #888888;">Spell check is broken for some languages. If your language is not working please let us know and we'll look into it</div>

    <hr class="mt-5">

    <h2 class="mt-4">Push notifications</h2>
    
    <div class="form-group row mt-4">
      <div class="col-sm-4">
        <label class="form-check-label" for="pushNotifsShowUnreadBadge">
          Show unread badge
        </label>
      </div>
      <div class="col-sm-8">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="pushNotifsShowUnreadBadge">
        </div>
      </div>
    </div>
    
    <div class="form-group row mt-4">
      <div class="col-sm-4">
        <label class="form-check-label" for="pushNotifsHideMessageBody">
          Hide message body
        </label>
      </div>
      <div class="col-sm-8">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="pushNotifsHideMessageBody">
        </div>
      </div>
    </div>
  
    <div class="mt-4 small" style="color: #888888;">Ensure Push Notification are also enabled in Goofy -> Messenger Preferences -> Desktop notifications enabled</div>

    <hr class="mt-5">

    <h2 class="mt-4">Privacy</h2>
    
    <div class="form-group row mt-4">
      <div class="col-sm-5">
        <label class="form-check-label" for="privacyBlockTypingIndicator">
          Block typing indicator
        </label>
      </div>
      <div class="col-sm-7">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="privacyBlockTypingIndicator">
        </div>
      </div>
    </div>
    
    <div class="form-group row mt-4">
      <div class="col-sm-5">
        <label class="form-check-label" for="privacyBlockSeenIndicator">
          Block "seen" indicator
        </label>
      </div>
      <div class="col-sm-7">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="privacyBlockSeenIndicator">
        </div>
      </div>
    </div>
    
    <hr class="mt-5">

    <h2 class="mt-4">Advanced</h2>

    <div class="form-group row mt-4">
      <label for="domainSelect" class="col-sm-2 col-form-label">Domain</label>
      <div class="col-sm-10">
        <select class="custom-select" id="domainSelect">
          <option value="messenger.com/login">https://messenger.com</option>
          <option value="facebook.com/messages">https://facebook.com/messages</option>
        </select>
      </div>
    </div>

    <div class="form-group row mt-4 mb-5">
      <div class="col-sm-5">
        <label class="form-check-label" for="collapseSidebar">
          Always collapse the sidebar
        </label>
      </div>
      <div class="col-sm-7">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="collapseSidebar">
        </div>
      </div>
    </div>

  </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./index.js"></script>

</body>
</html>
